<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>餐品管理页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
    <script th:src="@{/static/main.js}"></script>
</head>
<style>
</style>

<body>


<el-container id="app">
    <el-main>

        <div id="app" style="color:#e69317">
            <h1>{{storeName}}</h1>
        </div>

        <el-form :inline="true" class="demo-form-inline"
                 style="position: relative;top: 10px;text-align: center;">

            <el-form-item label="商品信息">
                <el-input v-model="keyword" placeholder="请输入商品信息"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="onReset">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addProductVisible = true;">增加餐品</el-button>
            </el-form-item>
        </el-form>


        <div v-if="productList.length < 1">
            <h2 style="text-align: center">
                搜索不到需求商品
            </h2>
        </div>

        <template>
            <el-table
                    :data="productList"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="productName"
                        label="商品名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="productImg"
                        label="商品图片"
                        width="180">
                    <!--插入图片链接的代码-->
                    <template slot-scope="scope">
                        <img :src="scope.row.productImg" alt="" style="width: 100px;height: 100px">
                    </template>
                </el-table-column>
                <el-table-column
                        prop="productPrice"
                        label="商品价格"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="stockCount"
                        label="库存量">
                </el-table-column>
                <el-table-column
                        prop="buyCount"
                        label="售卖量">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status==1" style="text-align: left;">
                            <el-tag type="info">已下架</el-tag>
                        </div>
                        <div v-if="scope.row.status==0" style="text-align: left;">
                            <el-tag type="success">已上架</el-tag>
                        </div>

                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleClick(scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="deleteProduct(scope.row.id)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>


        <!-- dialog 编辑餐品 -->

        <el-dialog title="编辑餐品" :visible.sync="dialogTableVisible" :data="templateList">
            <template scope='scope'>
                <el-form :model="templateList" ref="templateList" style="padding:0 1vw;">
                    <el-row :gutter="20">

                        <el-col :span="12">
                            <el-input v-model="templateList.productName" readonly>
                                <template slot="prepend">餐品名称</template>
                            </el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-input v-model="templateList.productPrice">
                                <template slot="prepend">餐品价格</template>
                            </el-input>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-input v-model="templateList.stockCount">
                                <template slot="prepend">库存量</template>
                            </el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-select size="small" v-model="templateList.status" style="padding-top: 5px">
                                <el-option label="上架" value="0"></el-option>
                                <el-option label="下架" value="1"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>


                </el-form>
            </template>
            <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm(templateList)">确定</el-button>
        </span>
        </el-dialog>



        <!-- dialog 增加餐品 -->
        <template>
            <div>
                <el-dialog title="增加餐品" :visible.sync="addProductVisible">
                    <el-form label-width="120px" :model="productInfo" :rules="rules" ref="productInfo">

                        <el-form-item label="餐品名" prop="productName">
                            <el-input v-model="productInfo.productName" clearable placeholder="请输入餐品名"></el-input>
                        </el-form-item>

                        <el-form-item label="餐品价格" prop="productPrice">
                            <el-input v-model="productInfo.productPrice" clearable placeholder="请输入餐品价格"></el-input>
                        </el-form-item>

                        <el-form-item label="餐品类型" prop="chooseTypes">
                            <template>
                                <el-select v-model="productInfo.chooseTypes" multiple placeholder="请选择">
                                    <el-option
                                            v-for="productType in productTypes"
                                            :key="productType.id"
                                            :label="productType.typeName"
                                            :value="productType.id">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>


<!--                        <el-form-item label="餐品类型" prop="typeId">-->
<!--                            <el-select v-model="productInfo.typeId" placeholder="请选择餐品类型">-->
<!--                                <el-option label="烧烤" value="1"></el-option>-->
<!--                                <el-option label="炸食" value="2"></el-option>-->
<!--                                <el-option label="饮料" value="3"></el-option>-->
<!--                                <el-option label="甜品" value="4"></el-option>-->
<!--                                <el-option label="汉堡" value="5"></el-option>-->
<!--                                <el-option label="披萨" value="6"></el-option>-->
<!--                                <el-option label="面条" value="7"></el-option>-->
<!--                                <el-option label="西餐" value="8"></el-option>-->
<!--                                <el-option label="卤味" value="9"></el-option>-->
<!--                                <el-option label="蛋糕" value="10"></el-option>-->
<!--                                <el-option label="面包" value="11"></el-option>-->
<!--                                <el-option label="早餐" value="12"></el-option>-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->

                        <el-form-item label="库存量" prop="stockCount">
                            <el-input v-model="productInfo.stockCount" clearable placeholder="请输入库存量"></el-input>
                        </el-form-item>

                    <!-- 表单里的图片上传！！！ -->
                        <el-form-item label="上传图片:"  prop="image">
                            <el-input v-model="productInfo.image" v-if="false"></el-input>
                            <el-upload class="upload-demo" ref="image" drag action="/common/upload"
                                       :on-success="handleAvatarSuccess">
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">
                                    将文件拖到此处，或<em>点击上传</em>
                                </div>
                            </el-upload>
                        </el-form-item>



                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="submitProductForm('productInfo')">创建餐品</el-button>
                        <el-button @click="clearAddForm">重置信息</el-button>
                    </div>
                </el-dialog>
            </div>
        </template>






        <div class="block" style="width:95%;text-align: center;position:absolute;top:560px">
            <el-pagination
                    @current-change="refreshProductList"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

    </el-main>


</el-container>


<script th:inline="javascript">
    console.log(".........productPage...........")

    let productApp = new Vue({
        el: "#app",

        data: {//属性

            //数据
            productTypes: [],
            keyword: '',
            productList: [],
            templateList:[],
            dialogTableVisible: false,
            addProductVisible:false,

            productInfo:{
                productName:'',
                productPrice:'',
                stockCount:'',
                chooseTypes: [],
                image:'',


            },
            rules: {
                productName: [
                    {required: true, message: '请输入餐品名称', trigger: 'blur'}
                ],
                productPrice: [
                    {required: true, message: '请输入餐品价格', trigger: 'blur'}
                ],
                chooseTypes: [
                    {required: true, message: '请选择餐品类型', trigger: 'change'},
                ],
                stockCount: [
                    {required: true, message: '请输入库存量', trigger: 'blur'}
                ]
            },

            currentPage: 1,
            pageSize: 3,
            total: 0,
            totalPages: 0,


            productId:0,
            //为其他页面备用
            storeId: [[${storeId}]],
            storeName: [[${storeName}]],


        }
        ,
        methods: {
            initProductTypes(){
                let _this = this;
                $.get("/productType/allTypes",{
                    storeId: _this.storeId,
                },function (data) {
                    console.log(data);
                    _this.productTypes = data;
                })
            }
            ,
            onSubmit() {
                this.refreshProductList();
            },

            onReset() {
                this.keyword = '';
                this.refreshProductList();
            },

            handleClick(e) {
                this.dialogTableVisible = true
                // console.log(e);
                this.templateList = extendCopy(e);
                // 对象进行深拷贝，否则“编辑”框内修改内容(e)会影响到页面
                console.log(this.templateList);

                function extendCopy(p) {
                    let c = {};
                    for (let i in p) {
                        c[i] = p[i];
                    }
                    c.uber = p;
                    return c;
                }
            },

            submitForm(val) {
                // val为修改之后的内容
                console.log(val);
                console.log(this.templateList);
                this.dialogTableVisible = false;
                let _this =this;
                $.post("/product/update",{
                    id: val.id,
                    productPrice: val.productPrice,
                    stockCount: val.stockCount,
                    status: val.status

                },function (data) {
                    _this.refreshProductList();
                })
            },

            submitProductForm(formName){
                //传入表单的vue data名，作为rules的校验，传入后端参数需要自己从vue获取
                console.log(formName);

                let _this = this;

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(_this.productInfo);
                        $.post("/product/add",{
                            storeId: _this.storeId,
                            productName:_this.productInfo.productName,
                            productPrice:_this.productInfo.productPrice,
                            stockCount:_this.productInfo.stockCount,
                            chooseTypes: _this.productInfo.chooseTypes,
                            productImg: _this.productInfo.image,
                        })

                        _this.dialogFormVisible = false;
                        _this.clearAddForm();

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            clearAddForm() {
                //打开新增表单时,清空表单数据
                this.$refs['productInfo'].resetFields();
            },

            deleteProduct(productId){

                let params={
                    productId:productId
                }
                console.log(params)
                let _this =this;
                $.post("/product/delete",params,function (data) {
                    //状态修改完成后刷新页面数据
                    _this.refreshProductList();
                })

            },

            refreshProductList() {

                let _this = this;

                let params = {
                    storeId: _this.storeId,
                    currentPage: _this.currentPage,
                    pageSize: _this.pageSize,
                    keyName: _this.keyword
                };
                console.log(params)
                $.post("/product/select", params, function (data) {

                    // // productApp.productList = data;
                    _this.productList = data.records;
                    _this.currentPage = data.current;
                    _this.pageSize = data.size;
                    //数据总量
                    _this.total = data.total;
                    //总页数
                    _this.totalPages = data.pages;
                    // console.log(_this.totalPages);
                })
            },
            handleAvatarSuccess(res,file){
                //RES是文件的名字，需要去后端拼字符串
                this.productInfo.image = res;


                console.log(res);
                console.log(file);

            }


        }
        ,
        created() {
            this.refreshProductList();
            this.initProductTypes();
        }

    });

</script>


</body>
</html>
